ul.options-list {
  width: 100%;

  li {
    &:last-of-type {
      border: 0;
    }

    .option-item {
      position: relative;
      display: block;
      padding: 12px 14px 10px;
      cursor: pointer;

      &::after,
      &.icon::before {
        position: absolute;
        font-family: "materialicon";
        font-size: 24px;
        font-weight: 400;
        top: 50%;
        transform: translateY(-50%);
      }

      &:hover {
        background: color("gray-lighten-4");
      }

      &.option-item--selected {
        position: relative;
        font-weight: 500;
        background: color("gray-lighten-4");
        border-radius: 3px;

        &.icon::before {
          color: theme-color("primary");
        }
      }

      &.option-item--hidden {
        display: none;
      }

      &.icon {
        position: relative;
        padding: 12px 14px 10px 38px;

        &::before {
          color: rgba(color("gray-darken-1"), 0.8);
          left: 8px;
        }
      }

      &.radio-option {
        &.option-item--selected {
          background: transparent;
          color: inherit;

          &::after {
            content: "\e837";
            font-size: 20px;
            color: theme-color("primary");
            right: 10px;
          }
        }
      }

      &.checkbox-option {
        position: relative;
        padding: 12px 14px 10px 38px;

        &::after {
          content: "\e835";
          font-size: 24px;
          color: rgba(color("gray-darken-1"), 0.8);
          left: 8px;
        }

        &.option-item--selected {
          background: transparent;
          color: inherit;

          &:hover {
            background: color("gray-lighten-4");
          }

          &::after {
            content: "\e834";
            color: theme-color("primary");
          }
        }
      }
    }
  }
}
